<!--
 * @Author: LiYuan
 * @Date: 2021-04-01 09:31:18
 * @LastEditTime: 2022-06-01 14:28:38
 * @LastEditors: lily
 * @Description: 回退事件
 * You build it, You run it.
-->

<template>
  <base-modal :title="$t('event.detail.components.dialog.text45')" :show.sync="visible" width="600px" class="event-roll-back-dialog">
    <div class="base-modal-content">
      <p>{{$t('event.detail.components.dialog.text44')}}</p>
      <el-input v-model="rollBackReason" type="textarea" :placeholder="$t('event.detail.components.dialog.text40')" maxlength="500"></el-input>
    </div>
    <div slot="footer">
      <el-button @click="visible = false">{{$t('common.base.cancel')}}</el-button>
      <el-button type="primary" @click="handleConfirm" :loading="loading">{{$t('common.base.makeSure')}}</el-button>
    </div>
  </base-modal>
</template>

<script>
import * as EventApi from '@src/api/EventApi.js';
export default {
  name: 'event-roll-back-dialog',
//   inject: ['initData'],
  props:{
    workEvent: {
      type: Object,
      default: () => {}
    }
  },
  data: () => {
    return {
      rollBackReason: '',
      visible: false,
      loading: false
    }
  },
  methods: {
    openDialog() {
      this.visible = true;
    },
    handleConfirm() {
      if (this.rollBackReason) {
        const params = {
          content: this.rollBackReason,
          eventId: this.workEvent.id
        }
        this.loading = true
        EventApi.eventRollBack(params)
          .then(res => {
            if (res.status == 0) {
              this.$emit('success')
              this.visible = false
              window.location.href = `${this.$resourcePrefix}/event/view/${this.workEvent.id}`;
            } else {
              this.$notify({
                title: this.$t('common.base.error'),
                message: res.message,
                type: 'error'
              });
            }
            this.loading = false
          })
      } else {
        this.$message.warning(this.$t('event.detail.components.dialog.text46'));
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.base-modal-content {
  padding: 20px;
}
</style>